<template>
  <div class="column-detail-page w-75 mx-auto">
    <div
      class="column-info row mb-4 border-bottom pb-4 align-items-center"
      v-if="column"
    >
      <div class="col-3 text-center">
        <img
          :src="column.avatar.url"
          :alt="column.title"
          class="rounded-circle border w-100"
        />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
        <p class="text-muted">{{ column.description }}</p>
      </div>
    </div>
    <post-list :list="list"></post-list>
  </div>
</template>



<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";

// 访问url内容，需要用到 router提供的一个钩子函数
import { useRoute } from "vue-router";


import { GlobalDataProps } from "../store";
import { useStore } from "vuex";
import PostList from "../components/PostList.vue";
export default defineComponent({
  components: {
    PostList,
  },
  setup() {
    // 拿到 route 对象
    const route = useRoute();

    // 实例化仓库对象
    const store = useStore<GlobalDataProps>();

    // 拿到 id
    const currentId = route.params.id;

    onMounted(() => {
           store.dispatch('fetchColumn', currentId)
           store.dispatch('fetchPosts', currentId)
    })

    // 从专栏标题中 取id
    //  find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
    const column = computed(() => store.getters.getColumnById(currentId));

    // filter() 创建一个新数组, 包含通过测试的所有元素
    // 把专栏id 与 文章 id，一一对应起来，这样就能做到对应的专栏显示对应的文章详情了
    const list = computed(() => 
      store.state.posts
      // store.getters.getPostsByCid(currentId)
    );
    return {
      column,
      list,
    };
  },
});
</script>